<template>
<div class="banner" @click="handleBannerClick">
  <img class="detail-img" :src="bannerImg" alt="">
  <div class="banner-info">
    <div class="banner-title">{{this.sightName}}</div>
    <div class="banner-number">
      <span class="iconfont banner-icon">&#xe632;</span>
      {{this.gallaryImgs.length}}
    </div>
  </div>
  <fade-animation>
    <common-gallay v-if="GallyShow" :imgs="gallaryImgs" @Close="handleGallyHide"></common-gallay>
  </fade-animation>
</div>
</template>

<script>
import CommonGallay from 'common/gallay/Gallay'
import FadeAnimation from 'common/fade/FadeAnimation'
export default {
  name: 'DetailBanner',
  components: {
    CommonGallay,
    FadeAnimation
  },
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  },
  data () {
    return {
      GallyShow: false
    }
  },
  methods: {
    handleBannerClick () {
      this.GallyShow = true
      console.log(this)
    },
    handleGallyHide () {
      this.GallyShow = false
      console.log(this)
    }
  }
}
</script>

<style lang="stylus" scoped>
.banner
  overflow hidden
  height:0
  padding-bottom 55%
  position relative
  .detail-img
    width 100%
  .banner-info
    position absolute
    left 0
    right 0
    bottom 0
    height .6rem
    display flex
    color #fff
    background-image linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
    .banner-title
      flex 1
      font-size .32rem
      padding 0 .2rem
    .banner-number
      padding 0 .32rem
      height:.32rem
      line-height .32rem
      border-radius .2rem
      background rgba(0,0,0,.8)
      font-size .24rem
</style>
